<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>打地鼠</title>
    <style>
        div{
            border:1px solid blue;
            margin: 5px auto;
        }
        #div_1{
            margin: 50px auto;
            width: 1200px;
            height: 600px;
            background-image: url("https://gitee.com/Java1123yanglei/myImages/raw/master/uPic/bg2qQHpZ.jpg");
        }
        #div_top{
            text-align: left;
            font-size: 20px;
        }
        table{
            border:1px solid blue;
            border-collapse: collapse;
        }
        table td,table th{
            border:3px solid #aaaaaa;
            background-position: center;
        }
        #tab_num{
            width: 250px;
            height: 200px;
            float: left;
            margin-top: 100px;
            margin-left: 300px;
        }
        #tab_num input{
            width: 70px;
        }
        #tab_game{
            width: 440px;
            height: 440px;
            float: right;
            margin-top: 20px;
            margin-right: 200px;
        }

    </style>
</head>
<body>
<div id="div_1">
    <div id="div_top">
        游戏规则:<br/>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;点击"开始游戏"按钮，在下图中随机产生老鼠，老鼠消失前单击老鼠进行击打，
        打中一次即可获得100的积分，没有打中老鼠，扣取100积分。快快行动吧，
        考验您的反应和眼力！
    </div>
    <div id="div_left">
        <table id="tab_num">
                <tr>
                    <th>--游戏时间:</th>
                    <td><input type="text" name="text_all" value="1">分</td>
                </tr>
                <tr>
                    <th>--出现间隔：</th>
                    <td><input type="text" name="text_interval" value="1">秒</td>
                </tr>
                <tr>
                    <th>--停留时间:</th>
                    <td><input type="text" name="text_standing" value="1">秒</td>
                </tr>
                <tr>
                    <th>--倒计时：</th>
                    <td><input type="text" name="text_countdown" value="1">秒</td>
                </tr>
                <tr>
                    <th>--得分情况：</th>
                    <td><span id="span_score"></span></td>
                </tr>
                <tr>
                    <th colspan="2">
                        <input type="button" value="开始游戏" name="but_start">
                        <input type="button" value="结束游戏" name="but_stop">
                    </th>
                </tr>
            </table>
        <table id="tab_game">

        </table>
    </div>
</div>
</body>
</html>
<script>
    let objectTdGame;
    // 定义一个变量记录被选中的单元格
    let collTd = new Array();
    // 定义一个数组记录所有的单元格
    let objectTabGame;
    // 记录游戏的table
    let objectTextCountdown;
    // 记录倒计时的input
    let myTextAll;
    // 游戏时间
    let myTextInterval;
    // 出现间隔
    let myTextStanding;
    // 停留时间
    let myTextCountdown;
    // 设置几个重要的变量

    let objectSpanScore;
    // 记录分数的span
    let objectButStart;
    // 开始按钮
    let objectButStop;
    // 结束按钮

    let numberOfTimes=0;
    // 次数
    let wins=0;
    // 赢得次数
    let gameId;
    let countdownId;
    // 记录游戏和倒计时的id

    window.onload =function () {
        // 文档加载完毕完毕时执行
        into();
        createTableGame();
        objectButStart.onclick=startGame;
        // 给开始游戏的按钮注册事件
        objectButStop.onclick=stopGame;
        // 给停止游戏的按钮注册事件
    }
    function startGame() {
        // TODO 开始游戏
        numberOfTimes=0;
        wins=0;
        // 重制次数和赢的次数

        myTextAll=parseInt(document.getElementsByName("text_all")[0].value)*60;
        // 游戏时间
        myTextInterval=parseInt(document.getElementsByName("text_interval")[0].value);
        // 出现间隔
        myTextStanding=parseInt(document.getElementsByName("text_standing")[0].value);
        // 停留时间
        myTextCountdown=myTextAll;
        // 倒计时的初始时间
        gameId=window.setInterval(game,(myTextStanding+myTextInterval)*1000);
        // setInterval 重复调用一个函数或执行一个代码段，在每次调用之间具有固定的时间延迟。
        // 指定时间之后执行游戏方法
        countdownId =setInterval(myCountdownMethod,1000);
        // 10000 毫秒之后执行 倒计时方法

    }
    function myCountdownMethod() {
        // TODO 倒计时方法
        myTextCountdown--;
        // 每隔一秒，时间-1
        objectTextCountdown.value=myTextCountdown;
        // 设置倒计时的文本框内容
        let message=`总:${numberOfTimes},赢:${wins}`;
        objectSpanScore.innerHTML=message.fontcolor("red").bold();
        // 设置分数文本框的内容
        if (myTextCountdown<=0){
            // 倒计时小于等于0，停止游戏
            stopGame();
        }
    }
    function stopGame() {
        // TODO 停止游戏
        clearInterval(gameId);
        clearInterval(countdownId);
        // 清除延迟执行方法
    }
    function game() {
        // TODO 游戏方法
        numberOfTimes++;
        let  num=myRandom(0,36);
        // 随机一个单元格的下标 范围 [0,36]
        objectTdGame=collTd[num];
        // 获取对应的单元格
        changeBackgroundImage("01");
        // 改变背景为普通的地鼠
        setTimeout("changeBackgroundImage('00')",myTextStanding*1000);
        // 等改 停留的时间之后，把背景更改为普通的纯色背景

    }
    function into() {
        // TODO  给全局变量赋值
        objectTabGame = document.getElementById("tab_game");
        objectTextCountdown=document.getElementsByName("text_countdown")[0];
        objectSpanScore=document.getElementById("span_score");
        objectButStart=document.getElementsByName("but_start")[0];
        objectButStop=document.getElementsByName("but_stop")[0];
    }
    function createTableGame() {
        // TODO 动态创建游戏table
        for (let i = 1; i <=6; i++) {
            let objectTr=document.createElement("tr");
            // 创建tr
            for (let j = 1; j <=6; j++) {
                let objectTd = document.createElement("td");
                // 创建td
                objectTd.style.backgroundImage="url(https://gitee.com/Java1123yanglei/myImages/raw/master/uPic/0032N1In.jpg)";
                // 设置背景图片
                objectTd.style.backgroundPosition="no-repeat";
                // 背景图片平铺方式
                objectTr.appendChild(objectTd);
                // td添加到tr中
                collTd.push(objectTd);
                // 把td放到array中
                objectTd.onclick=function () {
                    // 给td创建点击事件
                    myClick(this);
                }
            }
            objectTabGame.appendChild(objectTr);
            // tr添加到table中
        }
    }
    function myClick(node) {
        // TODO 点击事件
        if (node===objectTdGame){
            // 判断点击的是不是游戏td
            if ((node.style.backgroundImage.indexOf("01"))!==-1){
                // 判断游戏td的背景是不是老鼠 01
                wins++;
                // 赢得次数++
                changeBackgroundImage("02");
                // 改变背景图片为被打的地鼠
                setTimeout("changeBackgroundImage(\"00\")",200);
                // setTimeout 定时器在定时器到期后执行一个函数或指定的一段代码。
                // 200毫秒之后改变背景为普通背景

            }
        }
    }
    function changeBackgroundImage(s) {
        // TODO 改变背景图片
        if (s==="01"){
            // 如果是01
            objectTdGame.style.backgroundImage="url(https://gitee.com/Java1123yanglei/myImages/raw/master/uPic/01z1fnA8.jpg)";
            // 设置背景为 地鼠
        }else if (s==="02"){
            // 如果是02
            objectTdGame.style.backgroundImage="url(https://gitee.com/Java1123yanglei/myImages/raw/master/uPic/020uP47Q.jpg)";
            // 设置背景为 被打的地鼠
        }else if (s==="00"){
            // 如果是00
            objectTdGame.style.backgroundImage="url(https://gitee.com/Java1123yanglei/myImages/raw/master/uPic/0032N1In.jpg)";
            // 设置为普通背景
        }else {
            // 其他情况，啥也不干
        }

    }
    function myRandom(min, max) {
        // TODO 生成 [min,max]的随机数,包含min和max的值
        return parseInt(min + (Math.random() * (max - min + 1)));
    }
</script>